<ui:composition         
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:ds="http://deltaset.org/deltaset-faces"
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui">

    
    <script type="text/javascript">
        var currentMarker = null;
			
        function handlePointClick(event) {
            if(currentMarker == null) {
                document.getElementById('#{cc.clientId}:lat').value = event.latLng.lat();
                document.getElementById('#{cc.clientId}:lng').value = event.latLng.lng();

                currentMarker = new google.maps.Marker({
                    position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
                });
									
                map.addOverlay(currentMarker);

                dlg.show();
            }	
        }

        function markerAddComplete() {
            var title = document.getElementById('#{cc.clientId}:title');
            currentMarker.setTitle(title.value);
            title.value = "";

            currentMarker = null;
            dlg.hide();
        }

        function cancel() {
            dlg.hide();
            currentMarker.setMap(null);
            currentMarker = null;

            return false;
        }
    </script>

    <style type="text/css">
        .yui-skin-sam .yui-panel .bd{
            background: #333333;
            border-color: #000000;
            color:#CCCCCC;
        }

        .yui-skin-sam .yui-panel .hd {  
            background: url(../images/dialoghd.gif);
            border-color : #000000;
            color: #FFFFFF;
        } 

        .yui-skin-sam .yui-panel-container.shadow .underlay {
            background-color: #333333;
            bottom:-7px;
            left: 7px;
            opacity:0.5;
            position:absolute;
            right:-7px;
            top:7px;
        }

        .yui-skin-sam .container-close {
            background: url(../images/dialogclose.png) no-repeat;
        }
    </style>

    <p:growl id="messages" showDetail="true" />

    <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:600px;height:400px"
            model="#{mapBean.emptyModel}" onPointClick="handlePointClick(event);" widgetVar="map" />

    <p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true">
        <h:form prependId="false">
            <h:panelGrid columns="2">
                <h:outputLabel for="title" value="Title:" />
                <p:inputText id="title" value="#{mapBean.title}" />

                <f:facet name="footer">
                    <p:commandButton value="Add" actionListener="#{mapBean.addMarker}" update="messages" oncomplete="markerAddComplete()"/>
                    <p:commandButton value="Cancel" onclick="return cancel()"/>
                </f:facet>
            </h:panelGrid>

            <h:inputHidden id="lat" value="#{mapBean.lat}" />
            <h:inputHidden id="lng" value="#{mapBean.lng}" />
            
            
            
        </h:form>
    </p:dialog>

</ui:composition>   
